<script setup>
import { reactive, watch } from "vue";
const user = reactive({
  name: "tom",
  info: {
    gender: "男",
    age: 18,
  },
});

// 4. 监听响应式对象数据的一个数据，复杂类型
// watch(()=>数据, 改变后回调函数, {deep: true})
// watch(() => user.info, () => {
//   console.log('来了')
// }, {
//   // 开启深度侦听
//   deep: true
// })

const getData = () => {
  console.log('一进来执行一次请求数据, 数据变化也重新请求')
}

watch(user.info, () => {
  // console.log('来了')
  getData()
}, {
  // 进入就立马执行一次前面的函数
  immediate: true
})




// 2s改变数据
// setTimeout(() => {
//   user.info.age = 60;
// }, 2000);

// setTimeout(() => {
//   user.info.gender = '女';
// }, 4000);
</script>

<template>
  <p>
    姓名：{{ user.name }} 性别：{{ user.info.gender }} 年龄：{{ user.info.age }}
  </p>
</template>